<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>002-component</title>
    <script src='models/vue.dev.js'></script>
    <style>
        fieldset {
            border-inline: none;
            border-bottom: none;
        }

        legend {
            font-weight: bold;
            padding-inline: 1rem;
        }

        legend::before {
            content: '[ ';
        }

        legend::after {
            content: ' ]';
        }

        i {
            background-color: gainsboro;
        }
    </style>
</head>

<body>
    <noscript>当前环境不支持JavaScript</noscript>

    <div id='app'>
        <p>
            动态数据伴随全局刷新：
            {{ new Date().getTime() }}
        </p>

        <comp-1></comp-1>

        <!-- 如果使用单标签写法，Vue无法识别组件的结束位置，因此无法正确地渲染组件。 -->
        <!-- <comp-1 /> -->
        <!-- 因为Vue默认只处理含有闭合标签的组件。 -->

        <ul>
            <!-- 在Vue中，为每个组件提供一个“key”是为了帮助Vue更高效地渲染组件。 -->
            <!-- 当Vue渲染一个包含多个组件的列表时，它需要能够快速地判断哪些组件 -->
            <!-- 需要更新、哪些组件需要新增，以及哪些组件需要删除。 -->
            <comp-2 v-for="item in list1" :data="item" :key="item.id"></comp-2>
            <!-- 为了实现这个目的，Vue使用“key”属性来跟踪每个组件的身份。 -->
            <!-- 当Vue渲染一个新的列表时，它会比对新旧列表中每个组件的“key”属性， -->
            <!-- 以确定它们是否是同一个组件。如果两个组件的“key”属性相同， -->
            <!-- 则Vue认为它们是同一个组件，并将尝试尽可能地复用这个组件， -->
            <!-- 以提高渲染性能。如果两个组件的“key”属性不同，则Vue认为它们是不同的组件， -->
            <!-- 并将销毁旧组件并创建新组件。 -->
        </ul>
    </div>

    <script>
        Vue.component('comp-1', {
            template: `<p>comp-1 :> 自定义组件基础使用</p>`
        })

        Vue.component('comp-2', {
            props: ['data'],
            template: `<li>{{ data.id + " => " + data.text }}</li>`
        })

        var app = new Vue({
            el: '#app',
            data: {
                list1: [
                    { id: 0, text: 'hello' },
                    { id: 1, text: 'vue' }
                ]
            }
        })
    </script>
</body>

</html>